<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片浏览</title>

    <style>
        body {
            background-color: black;
        }
        
        li {
            float: left;
            position: relative;
            display: inline-block;
            border: 2px solid white;
            margin-left: -1px;
            border-collapse: collapse;
            list-style: none;
        }
        
        span {
            position: absolute;
            color: white;
            left: 50%;
            top: 10px;
        }
        
        ul {
            text-align: center;
        }
        
        div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        img {
            width: 200px;
            border: 0;
            height: 600px;
            vertical-align: middle;
            transition: all .5s ease;
            filter: blur(2px);
        }
        
        img:hover {
            width: 700px;
            filter: blur(0px);
        }
    </style>


</head>

<body>
    <div>
        <ul>
            <li>
                <img src="images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg">
                <span>图片1</span>
            </li>
            <li><img src="images/4e553f0f566c8fd27f77cf8537de376e0dd237f3.jpg">
                <span>图片2</span>
            </li>
            <li><img src="images/5e79acf1b6abe.jpg">
                <span>图片3</span>
            </li>
            <li><img src="images/3ba26ef4db83774591f67cbcb21ae9c2.jpeg">
                <span>图片4</span>
            </li>
        </ul>
    </div>



</body>

</html>